const arr = [[0, 90, '右上'], [90, 180, '左上'], [0, -90, '右下'], [-180, -90, '左下']];
const lis = document.querySelectorAll('li');
let index = 0; // 当前的 index
let time = {}; // 定时器的集合

window.addEventListener('load', () => {
	timeNext();
});

// 尝试解决切换tab页面引起的卡顿问题
document.addEventListener("visibilitychange", function () {
　 if (document.hidden) {
　　　　for (let i = 0; i < lis.length; i++) {
			clear(lis[i])
		}
		Object.values(time).forEach( t => {
			clearTimeout(t);
		})
　　} else {
		timeNext();
	}
});

function timeNext () {
	const dom = lis[index];
	const section = arr[index % 4];
	index++;
	// console.log(index);
	time['d' + index] = setTimeout(() => {
		dom.style.transition = 'all 5s ease-in';
		go(dom, section)
		timeNext();
		// 5000+1000 = lis.length
		time['n' + index] = setTimeout(() => {
			clear(dom);
		}, 4000)
	}, 1000);
	if (index === lis.length-1) {
		index = 0;
	}
}

// 添加目标属性
function go(dom, section = [-180, 180]) {
	if (document.hidden) {
		return
	}
	const p = makeDirection(random(...section));
	// console.log(p);
	dom.className='go'
	dom.style.visibility = 'visible';
	dom.style.left = p.x;
	dom.style.top = p.y;
}
function clear (dom) {
	dom.className = '';
	dom.style.cssText='';
	dom.style.transition = 'none';
}


